<template>
    <div class="question-view-wrap" v-loading="loading">
        <el-row type="flex" class="type-item-wrap">
            <el-col :span="2">
                <p class="type-title">试卷：</p>
            </el-col>
            <el-col :span="22">
                <p>{{ info.name }}</p>
            </el-col>
        </el-row>
        <el-row type="flex" class="type-item-wrap">
            <el-col :span="2">
                <p class="type-title">应考人数：</p>
            </el-col>
            <el-col :span="22">
                <p>{{ info.examCount }}</p>
            </el-col>
        </el-row>
        <el-row type="flex" class="type-item-wrap">
            <el-col :span="2">
                <p class="type-title">实际参考人数：</p>
            </el-col>
            <el-col :span="22">
                <p>{{ info.examFinishCount }}</p>
            </el-col>
        </el-row>
        <el-row type="flex" class="type-item-wrap">
            <el-col :span="2">
                <p class="type-title">缺考人数：</p>
            </el-col>
            <el-col :span="22">
                <p>{{ info.examCount - info.examFinishCount }}</p>
            </el-col>
        </el-row>
        <el-row type="flex" class="type-item-wrap">
            <el-col :span="2">
                <p class="type-title">考试创建时间：</p>
            </el-col>
            <el-col :span="22">
                <p>{{ info.createTime }}</p>
            </el-col>
        </el-row>
        <el-row type="flex" class="type-item-wrap">
            <el-col :span="2">
                <p class="type-title">考试明细：</p>
            </el-col>
            <el-col :span="22" class="exam-detail-table">
                <el-row type="flex" justify="end">
                    <el-button type="primary" @click="exportDetail">导出明细</el-button>
                </el-row>
                <el-table
                    v-loading="loading"
                    border
                    ref="examDetailTable"
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column label="序号" type="index" width="50"></el-table-column>
                    <el-table-column label="组织" prop="organization"></el-table-column>
                    <el-table-column label="部门" prop="department"></el-table-column>
                    <el-table-column label="职位" prop="postName"></el-table-column>
                    <el-table-column label="考生" prop="examAccountName"></el-table-column>
                    <el-table-column label="答题开始时间" prop="beginTime"></el-table-column>
                    <el-table-column label="耗时" prop="costTime"></el-table-column>
                    <el-table-column label="得分" prop="score"></el-table-column>
                    <el-table-column label="排名" prop="ranking">
                        <template slot-scope="scope">
                            <p v-if="scope.row.status == 0">缺考</p>
                            <p v-else-if="scope.row.status == 1">考试进行中</p>
                            <p v-else>{{ scope.row.ranking }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="答卷明细" width="100">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.status == 2" @click="handleDetail(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    small
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-col>
        </el-row>
        <!-- 考生答卷明细 -->
        <el-dialog
            :close-on-click-modal="false"
            title="答卷"
            width="1200px"
            top='10vh'
            v-if="dialogExamPaper"
            :visible.sync="dialogExamPaper"
            @close="closeExamPaper"
            v-dialogDrag>
            <examinee-answer-sheet-view :oldInfo="currentExamPaperInfo" :closeFun="closeExamPaper"></examinee-answer-sheet-view>
        </el-dialog>
    </div>
</template>
<script>
import { getExamDetailInfo } from '@/api/exam'
import ExamineeAnswerSheetView from '../../Common/ExamineeAnswerSheetView'

export default {
    name: 'QuestionView',
    props: {
        info: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    components: {
        ExamineeAnswerSheetView
    },
    data() {
        return {
            loading: true,
            tableData: [],
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            currentExamPaperInfo: {},
            dialogExamPaper: false
        }
    },
    created() {
        let that = this
        that.getTableData(1, 10)
    },
    methods: {
        // 获取列表数据
        getTableData(pageIndex, pageSize) {
            let that = this
            that.loading = true
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            
            getExamDetailInfo({
                id: that.info.id,
                status: -1, // 考试状态
                pageIndex: that.currentPage - 1,
                pageSize: that.pageSize,
                queryType: 1
            }).then(res => {
                if(res.status === 200) {
                    that.tableData = res.data
                    that.total = res.total
                }
                that.loading = false
            })
            
        },
        handleSizeChange(pageSize) {
            this.getTableData(1, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.getTableData(currentPage)
        },
        // 导出明细
        exportDetail() {
            let that = this
            let parames = {
                examId: that.info.id
            }
            let downloadUrl = this.GLOBAL.baseURL + 'exam/exportPersonalExamDetail?examId=' + parames.examId
                
            window.open(downloadUrl)
        },
        // 查看答卷明细
        handleDetail(row) {
            this.currentExamPaperInfo = row
            this.dialogExamPaper = true
        },
        closeExamPaper() {
            this.dialogExamPaper = false
        }
    }
}
</script>
<style lang="scss" scoped>
.question-view-wrap {
    .type-item-wrap {
        line-height: 40px;
        .type-title {
            text-align: right;
        }
        
    }
}
</style>
<style lang="scss">
.question-view-wrap {
    .exam-detail-table {
        line-height: 26px;
        .el-table {
            margin-top: 10px;
            td,
            th {
                padding: 0;
            }
        }
    }
}
</style>
